@import './element-variables.2.11.scss';
@import './custom-variables.1.7.scss';

/* 官方element组件二次改造
   ----------------
   | versions.1.7 |
   | 2019/08/06   |
   | EPM体验设计部 |
   ----------------

    1. 参照 Axure EPM-基础样式库1.6 版本设计;
    2. 部分ElementUI组件的UI样式根据版本迭代;
    3. 深度改造ElementUI组件且无破坏性参数，您依然可以使用官网提供的API;
    4. 此版本针对ElementUI组件符合业务的第一层改造，个性化需求不建议在此文件处修改;
    5. 更换主题请新建修改并关联新主题变量表和官方在线主题工具;
-------------------------------------------------------------------------*/


/* Button
-------------------------- */
.el-button {
  &.el-button--small{
    min-width: 90px;
    border-radius: 3px; // 大量按钮的设计都为size="small"，需修改圆角大小
  }
  &.el-button--primary-outline { // 修改了danger类型按钮样式
    background-color:$--color-white;
    border-color:$--color-primary;
    color:$--color-primary;
    &:hover,
    &:active,
    &:focus,
    &:visited {
      background-color: $--color-primary;
      border-color: $--color-primary;
      color: $--color-white;
    }
  }
  &.el-button--danger { // 修改了danger类型按钮样式
    background-color: $--color-grayish-1;
    border-color: $--border-color-base;
    color: $--color-danger;
    &:hover,
    &:active,
    &:focus,
    &:visited {
      background-color: $--color-danger-hover-color;
      border-color: $--color-danger-foucs-color;
      color: $--color-white;
    }
    &.el-button--text {
      color: $--color-danger;
    }
  }
}


/* Table
-------------------------- */
.el-table {
  font-size:12px;
  &::before,
  .el-table__fixed-right::before,
  .el-table__fixed::before {
    height: 0;
  }
  .el-table__header-wrapper {
    background-color:$--table-header-background-color; // 数据多时，出现滚动条后的bug
  }
  tr {
    height: 36px;
    .cell {
      line-height: 36px;
    }
    th {
      padding-top: 0;
      padding-bottom: 0;
      background-color:$--table-header-background-color;
      >.cell {
        color: $--color-text-grade-5;
        font-weight: normal;
      }
    }
    td {
      padding-top: 5px;
      padding-bottom: 5px;
      .el-button {
        min-width: unset;
      }
      .cell {
        line-height: 1.4;
      }
    }
  }
}


/* Pagination
-------------------------- */
.el-pagination {
  margin-top: 18px;
  text-align: right;
  &.is-background {
    .btn-prev,
    .btn-next,
    .el-pager li {
      min-width: 24px;
      font-weight: normal;
      background: $--argument-transparent;
      border: $--border-width-base $--border-style-base $--border-color-base;
      line-height: 22px;
      &:not(.disabled).active {
        background-color: $--color-primary;
        border:0;
      }
    }
    .el-pagination__jump {
      margin-left: 0;
    }
    .el-select {
      > .el-input {
        .el-input__inner {
          line-height: 22px;
          height:24px;
        }
        .el-input__icon {
          position: relative;
          top:-2px;
          line-height: 22px;
          &.is-reverse {
            top:0;
          }
        }
      }
    }
   .el-pagination__editor {
     transform: translateY(-1px);
    }
  }
}


/* Input
-------------------------- */

input[type="text"] {
  -webkit-appearance: none;
  background-color: $--color-white;
  background-image: none;
  border-radius: 3px;
  border: 1px solid $--border-color-base;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #646C9A;
  display: inline-block;
  height: 30px;
  line-height: 30px;
  outline: 0;
  padding: 0 15px;
  &:hover {
    border-color: $--color-text-grade-4;
  }
  &:focus {
    border-color:$--color-primary;
  }
  &::placeholder{
    color:$--color-text-grade-4;
  }
}

.el-input {
  .el-input__inner {
    border-radius: 3px;
  }
  &.el-input--prefix { // 不在form表单中
    >.el-input__inner {
      padding-left:10px;
    }
    >.el-input__suffix {
      right:25px;
    }
  }
  .el-input__icon {
    cursor: pointer;
  }
  .el-input__prefix {
    left:unset;
    right:5px;
  }
  .el-input__suffix {
    right: 5px;

  }
  &.el-input-group {
    .el-input__suffix {
      margin-right:20px;
    }
    .el-input-group__append,
    .el-input-group__prepend { // 插槽一个带有事件的图标按钮
      right:6px;
      padding:0;
      border:0;
      background-color:transparent;
      >.el-button {
        padding:0;
      }
    }
  }
}


/* Radio
-------------------------- */
.el-radio + .el-radio {
  margin-left: 12px;
}


/* Form
-------------------------- */
.el-form-item {
  margin-bottom:0;
  .el-form-item__label,
  .el-form-item__content {
    line-height: 30px;
 }
 .el-form-item__label {
   white-space: nowrap;
 }
}


/* Tag
-------------------------- */
.el-tag {
  height: unset;
  line-height: 32px;
}


/* DropDown
-------------------------- */
.el-dropdown-menu,
.el-select-dropdown {
  .el-dropdown-menu__item,
  .el-select-dropdown__item {
      &:hover {
         background-color: $--color-primary-color-3;
         box-shadow: 2px 0 0 $--color-primary inset;
      }
      &_danger {
        background-color: transparent;
        color: $--color-danger;
        &:hover {
          background-color: $--color-danger-color-3!important;
          box-shadow: 2px 0 0 $--color-danger inset;
          color: $--color-danger;
        }
      }
  }
  .el-select-dropdown__list {
    padding-bottom:20px;
  }
}


/* Tooltip
-------------------------- */
.el-tooltip__popper {
  &-danger {
    color:$--color-danger!important;
  }
  &.is-dark {
    color:$--color-blue-light-3;
    background-color: $--color-white;
    // old
    // border:1px solid $--border-color-base;
    // box-shadow: 0 0 4px rgba($color: #000, $alpha: .05);

    // new prism ---->
    padding-left:28px;
    padding-right:28px;
    color:$--color-text-grade-1;
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba($color: $--color-text-grade-1, $alpha: 0.1);
    &[x-placement^="right"] {
      padding-left:14px;
      padding-right:14px;
    }
    // ------>
     &[x-placement^="top"] .popper__arrow {
      border-top-color:$--border-color-base;
      &::after {
        border-top-color:$--color-white;
      }
     }
     &[x-placement^="right"] .popper__arrow {
        border-right-color:$--border-color-base;
        &::after {
          border-right-color:$--color-white;
        }
     }
     &[x-placement^="bottom"] .popper__arrow {
        border-bottom-color:$--border-color-base;
        &::after {
          border-bottom-color:$--color-white;
        }
     }
     &[x-placement^="left"] .popper__arrow {
        border-left-color:$--border-color-base;
        &::after {
          border-left-color:$--color-white;
        }
     }
  }
}


/* ScrollBar
-------------------------- */
.el-scrollbar {
  .el-scrollbar__wrap {
    overflow-x:hidden;
  }
}


/* Dialog ( new prism )
-------------------------- */
.v-modal {
  opacity: 0.77;
  background-color:$--color-blue-deep-1;
}

/* Message  :not(.el-message-box--center)
-------------------------- */
.el-message-box {
  box-shadow:none;
  &__title {
    >span {
      font-weight: normal;
      color:$--color-text-grade-1;
    }
  }
  &__headerbtn {
    font-size: 22px!important;
  }
  &__content {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-top:110px; // 临时设置
    height:150px;  // 临时设置
  }
  &__status {
    font-size:26px!important;
    position: static;
    transform:none;
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    &::before {
      content: "\e6b4";
    }
  }
  &__message {
    display: inline-table;
    padding:0 0 0 18px!important;
    > p {
      line-height: 24px;
      display: table;
      font-size:20px;
      > i {
        display: block;
        padding-top:6px;
        font-size:16px;
        font-weight: normal;
        font-style: normal;
        color:#b2b6cd;
      }
    }
  }
  &__btns {
    text-align: center;
  }
}
